<template>
    <div>
        显示消息：{{ mes }}
        <!-- <el-input v-model='sendsms'></el-input>
  <el-button @click='send'>submit</el-button> -->
        <div class="table-box">
            <van-row class="th-row">
                <van-col :span="24 / dataList.title.length" v-for="warn in dataList.title" :key="warn">
                    {{ warn }}
                </van-col>
            </van-row>
            <van-row class="tb-row" v-for="(wb, index) in mes" :key="index"
                :style="{ background: wb.status === 1 ? '#fff' : '#FF0000' }">
                <van-col :span="24 / Object.keys(wb).length" v-for="item in Object.keys(wb)" :key="item">{{ wb[item] }}
                </van-col>
            </van-row>

        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {

            dataList: {
                title: ['id', '名字', '最小温度', '最大温度', '状态', '当前温度']

            },
            mes: [],
            ws: '',
            sendsms: '',
            color: 'red'
        }
    },
    methods: {
        initWeb() {
            this.ws = new WebSocket("ws://localhost:8000/ws?id=1")
            this.ws.onopen = function () {
                alert('success')
            }
            this.ws.onmessage = (data) => {
                this.mes = JSON.parse(data.data)
            }
            this.ws.onclose = function () {
                alert('close')
            }
        },
        send() {
            this.axios.get('http://127.0.0.1:8000/greenhouse?id=1')
        }

    },
    mounted() {
        this.initWeb()
        this.send()
    }
}

</script>


<style>
.table-box {
    margin: 12px 0px;}
.th-row {
    height: 56px;
    line-height: 56px;
    background: #EBF1F7;
    padding: 0px 12px;
}
.tb-row {
    height: 56px;
    line-height: 56px;
    padding: 0px 12px;
    
}
</style>